<template>
    <wxTopStatus backgroundColor="#fff">
        <view class="nav-title">找工厂</view>
    </wxTopStatus>

    <view class="p-[30rpx]">
        <searchCom
            :showCamera="false"
            v-model="page.params.search"
            @confirm="confirmFn"
        ></searchCom>

        <view class="tag flex-row gap-[40rpx] py-[20rpx]">
            <view
                v-for="(item, index) in tagList"
                :key="index"
                class="tag-item"
                :class="{
                    active: page.params.bizTab === index + 1
                }"
                @click="bizTabSwitch(index + 1)"
            >
                {{ item.name }}</view
            >
        </view>
        <MeScrollPage :page="page" ref="MeScrollPageRef">
            <view class="list">
                <view
                    class="item"
                    v-for="(item, index) in page.data"
                    :key="index"
                    @click.stop="
                        $jump('/views/subViews/userHomePage/index/index?factoryId=' + item.id)
                    "
                >
                    <view class="item-top flex-row">
                        <view class="left flex-row flex-1-0-0 gap-[20rpx]">
                            <image :src="item.avatar" mode="aspectFill" />
                            <view class="info flex-column-between">
                                <view class="name">{{ item.name }}</view>
                                <view class="count"
                                    >产品数: {{ item.prodCount }} 粉丝数:{{
                                        item.followCount
                                    }}</view
                                >
                            </view>
                        </view>
                        <view class="right flex-center gap-[20rpx]">
                            <image
                                mode="aspectFill"
                                :src="$getImg('/img/factory/phone.png')"
                                @click.stop="callPhoenFn(item.contactPhone)"
                            ></image>
                            <image
                                mode="aspectFill"
                                :src="$getImg('/img/factory/chat.png')"
                                @click.stop="toImChat(item)"
                            ></image>
                        </view>
                    </view>
                    <template v-if="item.picDoorstepPhoto && item.picDoorstepPhoto.length > 0">
                        <view class="img-list grid-3 gap-[10rpx]">
                            <image
                                v-for="(src, i) in item.picDoorstepPhoto?.filter(
                                    (item, index) => index < 3
                                )"
                                :key="i"
                                :src="src"
                                :lazyLoad="true"
                                mode="aspectFill"
                            />
                        </view>
                    </template>
                </view>
            </view>
        </MeScrollPage>
    </view>
</template>

<script lang="ts" setup>
import searchCom from '../../findProduct/components/search'
import { PageProps } from '@/hooks/usePage'
import { getFactoryListAPI } from '@/api/shop'
import { callPhone, jump } from '@/utils/util'
import { jumpChat } from '@/utils/loginTIm'
import { useUserStore } from '@/stores/user'
const MeScrollPageRef = ref()

const userStore = useUserStore()
const tagList = ref([
    {
        name: '热门'
    },
    {
        name: '产品数'
    },
    {
        name: '最近更新'
    }
])

const callPhoenFn = async (phone: string) => {
    if (userStore.userInfo.memberId) {
        callPhone(phone)
    } else {
        const r = await uni.showModal({
            title: '提示',
            content: '购买会员获得权益后即可使用此功能，是否需要购买？'
        })
        if (!r.confirm) return
        jump('/pages/member/member')
    }
}

const bizTabSwitch = (val: number) => {
    page.params.bizTab = val
    MeScrollPageRef.value.resetData()
}

// 搜索
const confirmFn = () => {
    console.log('搜索', page.params.search)
    MeScrollPageRef.value.resetData()
}

const page = reactive<PageProps>({
    params: {
        // 搜索参数
        search: '',
        bizTab: 1,
        size: 20
    },
    fetchData: getFactoryListAPI // 请求接口 带分页的
})

//
const toImChat = (item: any) => {
    jumpChat(item.imUserId)
}
</script>
<style lang="scss" scoped>
.nav-title {
    font-size: 16px;
    font-weight: 700;
}

.tag {
    .tag-item {
        background-color: #f7f7f8;
        padding: 10rpx 30rpx;
        color: #4c5879;
        font-size: 13px;
        border-radius: 999rpx;
    }

    .active {
        background-color: #376af7;
        color: #fff;
    }
}

.list {
    .item {
        padding-bottom: 20rpx;
        .img-list {
            padding: 20rpx 0;
            image {
                width: 100%;
                aspect-ratio: 1/1;
                height: 100%;
                border-radius: 16rpx;
            }
        }

        .item-top {
            .left {
                image {
                    width: 80rpx;
                    height: 80rpx;
                    border-radius: 999rpx;
                }
                .info {
                    .name {
                        font-size: 15px;
                        font-weight: 700;
                        color: #303030;
                    }

                    .count {
                        font-size: 11px;

                        color: #b1b0af;
                    }
                }
            }
            .right {
                image {
                    width: 60rpx;
                    height: 60rpx;
                }
            }
        }
    }
}
</style>
